<template>
    <el-dialog
        v-model="showEdit"
        :title="popTitle"
        :close-on-click-modal="false"
        width="500px"
        append-to-body
        @closed="emit('close')"
    >
        <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
            <template v-if="['xunfei'].includes(channel)">
                <el-form-item label="APPID" prop="app_id">
                    <el-input v-model="formData.app_id" placeholder="请输入APPID" />
                </el-form-item>
                <el-form-item label="APIKey" prop="api_key">
                    <el-input v-model="formData.api_key" placeholder="请输入API Key" />
                </el-form-item>
                <el-form-item label="APISecret" prop="api_secret">
                    <el-input v-model="formData.api_secret" placeholder="请输入API Secret" />
                </el-form-item>
            </template>

            <template v-else-if="['minimax'].includes(channel)">
                <el-form-item label="groupId" prop="app_id">
                    <el-input v-model="formData.app_id" placeholder="请输入GroupId" />
                </el-form-item>
                <el-form-item label="APIKey" prop="api_key">
                    <el-input v-model="formData.api_key" placeholder="请输入API Key" />
                </el-form-item>
            </template>

            <template v-else-if="['baidu'].includes(channel)">
                <el-form-item label="APPID" prop="app_id">
                    <el-input v-model="formData.app_id" placeholder="请输入AppId" />
                </el-form-item>
                <el-form-item label="APIKey" prop="api_key">
                    <el-input v-model="formData.api_key" placeholder="请输入API Key" />
                </el-form-item>
            </template>

            <template v-else-if="['doubao'].includes(channel) && scene === 'draws'">
                <el-form-item label="APIKey" prop="api_key">
                    <el-input v-model="formData.api_key" placeholder="请输入API Key" />
                </el-form-item>
                <el-form-item label="APISecret" prop="api_secret">
                    <el-input v-model="formData.api_secret" placeholder="请输入API Secret" />
                </el-form-item>
            </template>

            <template v-else>
                <el-form-item label="APIKey" prop="api_key">
                    <el-input v-model="formData.api_key" placeholder="请输入APIkey" />
                </el-form-item>
            </template>

            <el-form-item label="备注" prop="remarks">
                <el-input
                    type="textarea"
                    v-model="formData.remarks"
                    placeholder="请输入备注"
                    :rows="4"
                />
            </el-form-item>
            <el-form-item label="状态">
                <el-radio-group v-model="formData.is_disable">
                    <el-radio :value="0">正常</el-radio>
                    <el-radio :value="1">停用</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template v-slot:footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="handleSubmit">确 定</el-button>
                <el-button @click="emit('close')">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import feedback from '@/utils/feedback'
import aiSecretApi from '@/api/setting/ai/secret'

const emit = defineEmits(['success', 'close'])
const props = defineProps({
    scene: {
        type: String,
        default: 'chat'
    },
    mark: {
        type: String,
        default: ''
    },
    channel: {
        type: String,
        default: ''
    }
})

const formRef = ref()
const showMode = ref<string>('add')
const showEdit = ref<boolean>(false)
const popTitle = computed<string>(() => {
    return showMode.value === 'edit' ? '编辑Key' : '新增Key'
})

// 表单数据
const formData: any = reactive({
    id: 0,          // ID
    scene: '',      // 密钥场景
    channel: '',    // 密钥通道
    app_id: '',     // AppId
    api_key: '',    // APIKey
    api_secret: '', // APISecret
    remarks: '',    // 备注
    sort: 0,        // 排序
    is_disable: 0   // 是否禁用:[0=否, 1=是]
})

// 表单规则
const formRules: any = reactive({
    api_key: [
        { required: true, message: 'APIKey不能为空', trigger: ['blur'] }
    ],
    app_id: [
        { required: true, message: 'AppID不能为空', trigger: 'blur' },
    ],
    api_secret: [
        { required: true, message: 'Secret不能为空', trigger: 'blur' },
    ]
})

/**
 * 提交表单
 */
const handleSubmit = async (): Promise<void> => {
    await formRef.value?.validate()
    if (showMode.value === 'edit') {
        await aiSecretApi.edit(formData)
    } else {
        await aiSecretApi.add(formData)
    }

    feedback.msgSuccess('操作成功')
    emit('close')
    emit('success')
}

/**
 * 打开表单
 *
 * @param {string} type
 * @param {any} row
 * @returns {Promise<void>}
 */
const open = async (type: string, row?: any): Promise<void> => {
    showMode.value = type
    showEdit.value = true
    formData.mark = props.mark
    formData.scene = props.scene
    formData.channel = props.channel

    if (type === 'edit') {
        const data = await aiSecretApi.detail(row.id)
        for (const key in formData) {
            if (data[key] !== null && data[key] !== undefined) {
                formData[key] = data[key]
            }
        }
    }
}

defineExpose({
    open
})
</script>
